// import React from "react";
// import ReactDOM from "react-dom/client";

// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<div >123</div>);

// 引入 TinyReact
import TinyReact from "./TinyReact";

// jsx
// 每个jsx对象都会被TinyReact.createElement()方法调用，返回VirtualDOM对象
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-set="test">（编码必杀技）</h2>
    <div>
      嵌套1<div>嵌套1.1</div>
    </div>
    <h3>（观察，这个将会被改变）</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2,3
    <input type="text" value="13" />
  </div>
);

// 输出代码执行结果
console.log(virtualDOM);

// TinyReact.render(virtualDOM, document.getElementById("root"));
function Demo() {
  return <h1>Hello</h1>;
}
function Heart(props) {
  return (
    <div>
      {props.title}&heart;
      <Demo />
    </div>
  );
}

// TinyReact.render(
//   <Heart title="Hello React" />,
//   document.getElementById("root")
// );

class Alert extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.state = { title: "Default Title" };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    this.setState({ title: "New Title" });
  }

  componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
  }
  componentWillUpdate() {
    console.log("componentWillUpdate");
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
  render() {
    console.log(this.state);
    return (
      <div>
        {this.props.name}
        {this.props.age}
        <div>
          {this.state.title}
          <button onClick={this.handleChange}>change title</button>
        </div>
      </div>
    );
  }
}

// TinyReact.render(<Alert name="zhangsan" age={20}/>, document.getElementById("root"))

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-set="test123">（编码必杀技）</h2>
    <div>
      嵌套1<div>嵌套1.1</div>
    </div>
    <h3>（观察，这个将会被改变）</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段被修改过的内容</span>
    <button onClick={() => alert("你好！！！")}>点击我</button>
    {/* <h3>这个将会被删除</h3> */}
    {/* <h6>这个将会被删除</h6> */}
    2,3
    <input type="text" value="13" />
  </div>
);

// TinyReact.render(virtualDOM, document.getElementById("root"));

setTimeout(() => {
  // TinyReact.render(modifyDOM, document.getElementById("root"));
  // TinyReact.render(<Alert name="leesi" age={40}/>, document.getElementById("root"))
}, 2000);

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this.input.value);
    console.log(this.alert);
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
  render() {
    return (
      <div>
        {/* 元素节点的ref属性 */}
        <input type="text" ref={(inputDOM) => (this.input = inputDOM)} />
        <button onClick={this.handleClick}>按钮</button>
        {/* 组件节点的ref属性 */}
        <Alert
          ref={(alertDom) => (this.alert = alertDom)}
          name="leesi"
          age={40}
        />
      </div>
    );
  }
}

// TinyReact.render(<DemoRef />, document.getElementById("root"));

class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.state = {
      persons: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
        { id: 4, name: "陆琪" },
      ],
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    const newState = JSON.parse(JSON.stringify(this.state));
    // 换顺序
    // newState.persons.push(newState.persons.shift());
    // 新增元素
    // newState.persons.splice(1, 0, {id: 0, name: '小王'});
    // 删除元素
    newState.persons.pop();
    this.setState(newState);
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.persons.map((person) => (
            <li key={person.id}>{person.name}<DemoRef /></li>
          ))}
        </ul>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    );
  }
}
TinyReact.render(<KeyDemo />, document.getElementById("root"));
